import React, { createContext } from 'react';
import { connect, DispatchProp } from 'dva';
import { Spin } from 'antd';
import StepBar from './components/StepBar';
import OrderInfoCard from './components/OrderInfoCard';
import styles from './index.less';
import { StoreState } from '@/common/store/store';
import { Order } from '../model';
import router from 'umi/router';

interface OrderDetailsProps extends DispatchProp {
  order?: Order;
  loading?: boolean;
}

export const OrderDetailsContext = createContext<OrderDetails>({} as OrderDetails);

// eslint-disable-next-line react/prefer-stateless-function
class OrderDetails extends React.Component<OrderDetailsProps> {
  closeOrder(id: number) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/update',
      payload: {
        id,
        status: 4,
      },
    });
  }

  cancelOrder(id: number) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/update',
      payload: {
        id,
        status: 5,
      },
    });
  }

  traceOrder(id) {
    console.log('trace order');
  }

  deleteOrder(id: number) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/remove',
      id,
      callback() {
        console.log('asd');
        router.push('/order/list');
      },
    });
  }

  render() {
    const { order, loading } = this.props;
    return (
      <Spin spinning={loading}>
        <div className={styles.main}>
          <div className={styles['step-bar']}>
            <StepBar {...order!} />
          </div>
          <OrderDetailsContext.Provider value={this}>
            <OrderInfoCard order={order} />
          </OrderDetailsContext.Provider>
        </div>
      </Spin>
    );
  }
}

const mapStateToProps = (state: StoreState) => ({
  order: state.order.orderDetails,
  loading: state.loading.models.order,
});

export default connect(mapStateToProps)(OrderDetails);
